import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Card } from 'antd';
import { actionCreators } from './store';
import './index.scss';


class Home extends Component {

  render() {
    return (
      <div className='home-wrapper'>
        <div className='info-list'>
          <Card title='访问人数' bordered={false} className='info-item'>
            22
          </Card>
          <Card title='喜欢数量' bordered={false} className='info-item'>
            102
          </Card>
          <Card title='讨厌数量' bordered={false} className='info-item'>
            33
          </Card>
          <Card title='文章数量' bordered={false} className='info-item'>
            65
          </Card>
        </div>
      </div>
    );
  }
}

const mapState = (state) => ({
  accessNum: state.getIn(['home', 'accessNum']),
  likeNum: state.getIn(['home', 'likeNum']),
  hateNum: state.getIn(['home', 'hateNum']),
  articleNum: state.getIn(['home', 'articleNum'])
});

const mapDispatch = (dispatch) => ({
  initHomeInfo() {
    actionCreators.initHomeInfo()
  }
});

export default connect(mapState, mapDispatch)(Home);